
{% load i18n %}
<!DOCTYPE HTML>
<html>
<head>
    <title>TradingView Charting Library demo</title>

    <!-- Fix for iOS Safari zooming bug -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!-- jQuery is not required to use Charting Library. It is used only for sample datafeed ajax requests. -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><\/script>')</script>
    <script type="text/javascript" src="/static/charting_library/charting_library.min.js"></script>
    <script type="text/javascript" src="/static/charting_library/datafeed/udf/datafeed.js"></script>

    <style type="text/css">
      body,html {
        background: #0C0F13;
      }
    </style>

    <script type="text/html" id="tvWebSmallStyle">
      /* 小屏幕下的样式注入 */
      /* pane-legend 只显示高开低收 */
      .pane-legend .pane-legend-minbtn.apply-common-tooltip{
        display: none;
      }
      .pane-legend .pane-legend-line.apply-overflow-tooltip.main{
        display: none;
      }
      .pane-legend .pane-legend-line.pane-legend-wrap.study {
        display: none;
      }
      /* 隐藏全部弹窗 */
      .ui-draggable._tv-dialog {
        display: none;
      }
        body.chart-page {
            background: #0C0F13;
        }


        body.chart-page .chart-container {
            border: none;
            background-color: #0C0F13; /* black; */
        }

        .tv-side-toolbar {
            border-right: 1px solid hsla(0,0%,100%,.1);
        }

        /* 隐藏底部缩放等操作按钮 */
        .chart-widget .control-bar-wrapper,
        .chart-widget .back-to-present{
            display: none;
        }

        .tv-close-panel.top {
            display: none;
        }

        .tv-close-panel.left {
            border: 1px solid #c9cbcd;
            left: 51px;
        }
        .pane-legend .pane-legend-line {
            font-size: 12px !important;
        }

        //.onchart-tv-logo {
        //    display: none;
        //}


        /* 小屏下显示全屏按钮 */
        //@media only screen and (max-width: 340px) {
        //    body .header-chart-panel .left .group.header-group-fullscreen {
        //        display: inline-block !important
        //    }
       // }

        .header-chart-panel .header-chart-panel-content {
                display: none;
        }
        .chart-markup-table tr:nth-child(3)  {
               display: none;
        }

    </script>

   <script type="text/javascript">
      const langMap = {
        zh_CN: 'zh',
        zh_HK: 'zh_TW',
        ru_RU: 'ru',
        en_US: 'en',
        ja_JP: 'ja',
        ko_KR: 'ko',
        pt_PT: 'pt',
        es_ES: 'es',
        de_DE: 'de',
        fr_FR: 'fr',
        nl_NL: 'nl_NL'
      };

      window.tvWeb = {
        host: getParameterByName('host')||'https://www.nbex.com',
        locale: getParameterByName('locale')||'zh_CN',
        height: getParameterByName('height')||300,
        interval: getParameterByName('interval')||5,
        fullScreen: +getParameterByName('fullScreen')||0,
        isWebView: !!getParameterByName('isWebView')|| false,

//        // 鏃跺尯鏇存敼鍥炶皟
//        onTZChange: function(tz) {
//          // tz: UTC+8 , UTC, UTC+10:35
//          console.log('change tz:'+tz);
//        },
        setInterval: function(interval) { // interval 鍗曚綅鍒嗛挓
          interval = ''+interval;
          if (window.tvWidget) {
            var widget = window.tvWidget;
            var symbol =  getParameterByName('symbol_key')|| "btc_bitcny";       // symbol in vue use change to symbol_key
            widget.setSymbol(symbol, interval);

            if ( interval === '1' ) {
              widget.chart().setChartType(2); // STYLE_LINE
            } else if (interval > 1 && interval <= 2) {
              widget.chart().setChartType(3); // STYLE_AREA
            } else {
              widget.chart().setChartType(1); // STYLE_CANDLES
            }
          }
        }
      };

      function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
          results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
      }

      /**
       * initChart
       */
      function initChart() {

        var disabled_features = ['save_chart_properties_to_local_storage', 'chart_crosshair_menu', 'header_symbol_search', 'show_interval_dialog_on_key_press', 'header_indicators'];
        // my
        disabled_features = disabled_features.concat ( ["left_toolbar",  "header_saveload", "compare_symbol", "display_market_status", "go_to_date", "header_chart_type","header_resolutions", "header_compare", "header_interval_dialog_button", "header_screenshot", "header_symbol_search", "header_undo_redo", "legend_context_menu", "show_hide_button_in_legend", "show_interval_dialog_on_key_press", "snapshot_trading_drawings", "symbol_info", "timeframes_toolbar", "use_localstorage_for_settings", "volume_force_overlay", "adaptive_logo", 'legend_context_menu', 'left_toolbar', 'header_fullscreen_button','legend_context_menu', 'control_bar', 'border_around_the_chart']);
        if (tvWeb.isWebView) {
          disabled_features = disabled_features.concat([
            'link_to_tradingview', 'edit_buttons_in_legend', 'header_layouttoggle',
            'control_bar', 'header_chart_type', 'header_screenshot', 'header_undo_redo',
            'timeframes_toolbar', 'header_compare', 'header_indicators', 'header_settings', 'header_widget_dom_node',
            'display_market_status','adaptive_logo' ]);
          if (!tvWeb.fullScreen) {
            disabled_features = disabled_features.concat([
            ]);
          }
        }


        TradingView.onready(function () {

            var symbol =  getParameterByName('symbol')|| "btc_bitcny"
            var s =window.location.pathname
            s = s.substr(0, s.length - 1);
            var datafeed_url = s

            var widget = window.tvWidget = new TradingView.widget({

                width: '100%',
                height: tvWeb.height,
                //height: '100%',
                fullscreen: false,
                symbol: symbol,
                interval: tvWeb.interval,
                container_id: 'tv_chart_container',
                //datafeed: datafeed,
                datafeed: new Datafeeds.UDFCompatibleDatafeed(datafeed_url),

                library_path: "/static/charting_library/",
                //custom_css_url: "day.css",
                locale: getParameterByName('lang') || "zh",
                timezone: 'Asia/Hong_Kong',

            drawings_access: {type: 'black', tools: [{name: 'Regression Trend'}]},
            disabled_features: disabled_features,
            enabled_features: [],
            client_id: 'tradingview.com',
            user_id: 'public_user',
            widgetbar: {details: false},
            toolbar_bg: '#0C0F13', //'#000',
            loading_screen: { backgroundColor: '#0C0F13' },

            overrides: {
               volumePaneSize: "small",     // 最小
              'mainSeriesProperties.lineStyle.linewidth': 2,
              'paneProperties.background': '#0C0F13', //'#000',
              'paneProperties.vertGridProperties.color': 'rgba(255,255,255,.08)',
              'paneProperties.horzGridProperties.color': 'rgba(255,255,255,.08)',
              "mainSeriesProperties.candleStyle.upColor": "#53B987",
              "mainSeriesProperties.candleStyle.downColor": "#EB4D5C",
              'symbolWatermarkProperties.transparency': 90,
              'scalesProperties.textColor': 'rgba(255,255,255,.8)',
              'mainSeriesProperties.candleStyle.drawBorder': false,
            }
          });
          widget.onChartReady(function () {

            const iFrameID = $('iframe', document.getElementById('tv_chart_container'))[0];
            //const jsLink = iFrameID.contentDocument.createElement('script');
            //jsLink.src = 'my/custom.js?v=2017_10_18';
            //jsLink.type = 'text/javascript';
            //iFrameID.contentDocument.body.appendChild(jsLink);

            const screenCSS = iFrameID.contentDocument.createElement('style');
            screenCSS.innerHTML = document.getElementById('tvWebSmallStyle').innerHTML;
            iFrameID.contentDocument.head.appendChild(screenCSS);

//            widget.chart().setChartType(1); // STYLE_CANDLES
            tvWeb.setInterval(tvWeb.interval);
            if (!tvWeb.fullScreen) { // 隐藏右边
              widget.chart().executeActionById('showRightAxis');
            }

            widget.chart().createStudy('VOLUME', true);
            widget.chart().createStudy('Moving Average', false, false, [7, 'close'], null, {'plot.color': "#6D9EEB", 'plot.linewidth': 2});
            widget.chart().createStudy('Moving Average', false, false, [25, 'close'], null, {'plot.color': "#f3ba2e", 'plot.linewidth': 2});
          });
        });
      }
      initChart();
    </script>

</head>

<body style="margin:0px;">
<div id="tv_chart_container"></div>
</body>
</html>
